<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋商城</title>
    <script src="../lib/js/jquery-1.10.1.min.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../ajax/request.js"></script>
    <script src="../utils/cookie.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../styles/css/index.css">
</head>
<body>
    <div class="page home">
        <div class="swiper-container" id="banner">
            <div class="swiper-wrapper" >
                <div class="swiper-slide"><img src="../image/imgs/1.jpg" alt="" class="img"></div>
                <div class="swiper-slide"><img src="../image/imgs/2.jpg" alt="" class="img"></div>
                <div class="swiper-slide"><img src="../image/imgs/3.jpg" alt="" class="img"></div>
                <div class="swiper-slide"><img src="../image/imgs/4.jpg" alt="" class="img"></div>
                <div class="swiper-slide"><img src="../image/imgs/5.jpg" alt="" class="img"></div>
                <div class="swiper-slide"><img src="../image/imgs/6.jpg" alt="" class="img"></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>

        <!-- 商品 -->

        <div class="good w" >
            <h3>欢迎来到千锋在线商城</h3>
            <div class="wrapper ">
                <div class="form-box">
                    <form onsubmit="return false" class="form">
                        <div class="searchbox">
                            <input type="text" placeholder="请输入搜索关键字" class="searchInp">
                            <button class="searchBtn">搜索</button>
                        </div>
                        <div class="orderBox">
                            <div class="orderColBox">
                                <label for="">编号
                                    <input type="radio" checked="" name="orderCol" class="orderCol" value="id" >
                                </label>
                                <label for="">名称
                                    <input type="radio"  name="orderCol" class="orderCol" value="goodsName" >
                                </label>
                                <label for="">价格
                                    <input type="radio" name="orderCol" class="orderCol" value="goodsPrice" >
                                </label>
                            </div>
                            <div class="orderTypeBox">
                                <label for="">升序
                                    <input type="radio" checked="" name="orderType" class="orderType" value="asc" >
                                </label>
                                <label for="">降序
                                    <input type="radio"  name="orderType" class="orderType" value="desc" >
                                </label>
                            </div>
                            <div class="showNumBox">
                                <select class="select">
                                    <option value="10" selected="">每页显示10条</option>
                                    <option value="20" >每页显示20条</option>
                                    <option value="40" >每页显示40条</option>
                                    <option value="60" >每页显示60条</option>
                                </select>
                            </div>
                        </div>
                        <input type="reset" onclick="resetdata()" class="resetBtn" value="重置">
                    </form>
                </div>
                <ul class="good-box list">
                    <!-- <li>
                        <a href="">
                            <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg" alt="">
                        </a>
                        <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
                        <p class="price"   >
                            ￥<span>5988.00</span>
                        </p>
                    </li>
                    -->
                </ul>
                <div class="pagebox">
                    <button class="prev">上一页</button>
                    <p class="pagetips">1/20,共578条</p>
                    <button class="next">下一页</button>
                    
                </div>
            </div>
        </div>
    </div>



    <script>
      
        $(function(){
            var odiv = document.createElement("div");
            $(odiv).attr("id",'head').load("../tpls/head.html",function(){}).prependTo($('body'));
            var odiv1 = document.createElement("div");
            $(odiv1).attr("id",'foot').load("../tpls/foot.html",function(){}).appendTo($('body'));


            // 实例化 swiper
            let myswiper = new Swiper("#banner",{
                autoplay:{
                    delay:3000,
                    disableOnInteraction: false,
                },
                loop:true,
                speed:2000,
                navigation: {    // 前进后退按钮
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {   // 分页器
                    el: '.swiper-pagination',
                    clickable:true,
                },
            })
        })
    </script>

    <script>
        // 排序
        // 搜索
        // 分页 
        var goodbox = document.getElementsByClassName('good-box')[0];
        var searchBtn = document.getElementsByClassName('searchBtn')[0];
        // var searchInp  = document.getElementsByClassName("searchInp")[0];
        var form = document.getElementsByClassName("form")[0];
        var select  = document.getElementsByClassName("select")[0];
        var prev  = document.getElementsByClassName("prev")[0];
        var pagetips  = document.getElementsByClassName("pagetips")[0];
        var next  = document.getElementsByClassName("next")[0];

        // 提前声明全局变量  改了谁 就搜索谁 全局统一的 
        var key = ""   // 全局变量 搜索关键字
        var orderCol = "id"  // 全局变量 默认的排序字段 
        var orderType = "asc"  // 全局变量 默认的排序类型  aec 升序  desc 降序  
        var pageIndex = 1  // 全局变量 默认的第几页 1
        var pageNum = 10   //  全局变量 每页显示的多少条 
        // 重置数据 
        function resetdata(){
            key = "";
            orderCol = "id"  
            orderType = "asc"  
            pageIndex = 1
            pageNum = 10 
            loadallgood()
        }
        
        //选择 每页条数 
        select.onchange = function(){
            pageNum = select.value ;
            // 每次修改pageNum 把pageIndex 重置为 1 
            pageIndex = 1
            console.log(pageNum);
            loadallgood();
        }
        // 合并所有的搜索条件 
        form.onclick = function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            // 模糊 搜索
            if(target.className=="searchBtn"){
                var searchInp = target.previousElementSibling;  // 查询兄弟元素 
                key = searchInp.value;
                console.log(key)
                loadallgood()
            }else if(target.className=='orderCol'){
                orderCol = target.value;
                console.log(orderCol)
                loadallgood()
            }else if(target.className=='orderType'){ 
                // 排序类型改变 
                orderType = target.value;
                console.log(orderType)
               
                loadallgood()
            }
        }


        //  初始化请求商品数据 
        async function loadallgood(){
            let res = await getGoodList_ajax({
                key,   // key = '' 搜索所有的数据 
                orderCol,
                orderType,
                pageIndex,
                pageNum
            })
            // 循环数据 
            // 渲染数据
            var { status,detail,result,maxPage,total } =  res;
            if(status){
                var html = "";
                result.forEach((item,index)=>{
                    var {id,goodsId ,goodsName,goodsImg , goodsPrice} = item;
                    html+= `<li>
                <a href="./detail.html?goodsId=${goodsId}&goodsName=${goodsName}">
                    <img src="${goodsImg}" alt="">
                </a>
                <p class="info">${goodsName}</p>
                <p class="price"   >
                    ￥<span>${goodsPrice}</span>
                </p>
            </li> `;
                })
                goodbox.innerHTML = html;
                pagetips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;

                prev.onclick = function(){
                    if(pageIndex<=1) return false;
                    // 自减
                    pageIndex--;
                    pagetips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;
                    loadallgood()
                }
                next.onclick = function(){
                    if(pageIndex>=maxPage) return false;
                    // 自减
                    pageIndex++;
                    pagetips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;
                    loadallgood()
                }
            }else{
                goodbox.innerHTML = "暂无商品"
            }
        }

        $(function(){
            loadallgood()
        })
    </script>
</body>
</html>